<template>
  <van-tabbar v-model="active" @change="onTabChange">
    <van-tabbar-item icon="home">首页</van-tabbar-item>
    <!-- v-if="showShop" -->
    <van-tabbar-item icon="shop">商城</van-tabbar-item>
    <van-tabbar-item icon="cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="contact">个人中心</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem,Icon } from 'vant'
import api from '@/api';
const { user } = api;
export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Icon.name]: Icon,
  },

  data() {
    return {
      active: 0,
      showShop:false
    }
  },

  props: ['current'],

  created() {
    this.getMenuList()
    // if(this.$)
    // const pathMap = {
    //   home: 0,
    //   shop: 1,
    //   shoppingcar: 2,
    //   'user-center': 3
    // }
    // let pathname = this.$route.path.slice(1)
    // this.active = pathMap[pathname] || 0
  },

  watch: {
    current(activeIndex) {
      const pathMap = {
      home: 0,
      shop: 1,
      shoppingcar: 2,
      'user-center': 3
    }
    let pathname = this.$route.path.slice(1)
    // console.log(pathMap[pathname]);
    this.active = pathMap[pathname] || 0
      // activeIndex !== this.active && (this.active = activeIndex)
      // console.log(activeIndex);
      // this.active = activeIndex
    }
  },

  methods: {
    onTabChange(i) {
      // debugger
      // console.log(i);
      this.$bus.$emit('change-current', i)
      switch(i) {
        case 0:
          this.$route.path !== '/home' && this.$router.push('/home')
          break
        case 1:
          this.$route.path !== '/shop' && this.$router.push('/shop')
          break
        case 2:
          this.$route.path !== '/shoppingcar' && this.$router.push('/shoppingcar')
          break
        case 3:
          this.$route.path !== '/personal-center' && this.$router.push('/user-center')
          break
      }
    },
    getMenuList(){
      user
        .getMenu()
        .then((res) => {
          if(res.code===401){
            this.$router.push('/login');
            return
          }
          // if(res.code===200){
          //   if(res)
          // }
          // console.log(res);
        });
    }
  }
}
</script>
